<template>
    <div id="main">
      <el-header height="90px">
        <div class="logo"><img :src="require('@/assets/logo.png')"></div>
        <div class="header-right" v-show="isComputer">
          <div class="user-name">
            <img class="padlr5 pointer" :src="require('@/assets/head_36.png')" />
            <div class="name">{{$root.user.realName}}</div>
            <span class="padlr5">|</span>
            <span class="pointer" @click="logout()" >退出 </span>
          </div>
        </div>
      </el-header>
      <el-container>
        <div class="menuDiv">
          <div style="height: 56px;text-align: right;padding: 20px 20px 0 0;color: white;font-size: 24px">
            <i :class="isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="isCollapse=!isCollapse" style="cursor: pointer"></i>
          </div>
          <el-menu
              :default-active="curMenu"
              class="el-menu-vertical-demo"
              :router="false"
              @select="selectMenu"
              @open="handleOpen"
              @close="handleClose"
              background-color="#001529"
              :collapse="isCollapse"
              :unique-opened="false"
              text-color="#FFFFFF"
              active-text-color="#FFFFFF">
            <template  v-for="item in menu"  >
              <el-menu-item v-if="!item.nodes" :key="item.text" :index="item.path">
                <i :class="item.icon"></i>
                <span slot="title">{{item.text}}</span>
              </el-menu-item>
              <el-submenu v-if="item.nodes" :key="item.text" :index="item.text" >
                <template slot="title">
                  <i :class="item.icon"></i>
                  <span>{{item.text}}</span>
                </template>

                <!-- 判断是否最后一级子元素 -->
                <template v-for="(item1, index1) in item.nodes">
                  <!-- 如果不是最后一级 -->
                  <template v-if="item1.nodes ">
                    <el-submenu :key="index1" :index="item1.text">
                      <template slot="title">
                        <span>{{ item1.text }}</span>
                      </template>
                      <el-menu-item v-for="(item2, index2) in item1.nodes" :key="index2" :index="item2.path" >
                        <span>{{ item2.text }}</span>
                      </el-menu-item>
                    </el-submenu>
                  </template>
                  <!-- // -->
                  <!-- 如果是最后一级 -->
                  <template v-else>
                    <el-menu-item :key="index1" :index="item1.path">
                      <span>{{ item1.text }}</span>
                    </el-menu-item>
                  </template>
                  <!-- // -->
                </template>
              </el-submenu>
            </template>
          </el-menu>

        </div>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </div>
</template>

<script>
  /* eslint-disable no-debugger */

  // @ is an alias to /src
import localMenu from '@/js/menu'

export default {
  name: 'home',
  data(){
    return{
      menu:localMenu.menu,
      curMenu:"/",
      subPage:false,
      isCollapse: false,
      isComputer:true
    }
  },
  methods:{
    getUserInfo(){
      let vm = this;
      const ss =  this.login(vm);
      ss.then(()=>{
        let userStr = window.sessionStorage.getItem("user");
        console.log(userStr);
        if(userStr && userStr.startsWith("{")){
          this.$root.user = JSON.parse(userStr);
          console.log(userStr);
        }else{
          this.logout();
        }
      })
    },
    async login(vm){
      vm.$root.mode = vm.$route.query.mode;
      if(vm.$root.mode!="pad"){
        vm.isComputer = true;
        return await "";
      }else{
        vm.isComputer = false;
      }
      let user = {userName:"ldhy",password:"123456"}
      return await this.$http.post("/yczmq/login",window.changeDataType(user)).then(resp=>{
        if (resp.status == 0) {
           window.sessionStorage.setItem("user",JSON.stringify(resp.data))
        }
      })
    },
    logout(){
      this.$http.post("/yczmq/logout").then(resp => {
        if (resp.status == 0) {
          this.$router.push("/login");
         /* window.location.href=this.$root.baseUrl+"/login";*/
        }
      })
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    selectMenu(index,indexPath){
      console.log(index, indexPath);
      this.goto(index);
/*      if(index.indexOf("http")==-1){
        this.$router.push(index);
      }else {
        window.open(index,"_blank");
       // window.open(index,"_blank",window.top==window?"":"fullscreen=0,location=0,titlebar=0");
      }*/
    },
    setSubPage(route){
      window.console.log("fullPath:"+route.fullPath);
      /*if(/service\/relation/.test(route.fullPath)){
        this.subPage = false;
        return
      }*/
      this.subPage = route.fullPath && !/\/$/.test(route.fullPath);
      this.curMenu = route.fullPath;
    }
  },
  watch:{
    '$route' (to,from){
      window.console.log(from);
      document.title = to.meta.title;
      this.setSubPage(to);
    }
  },
  created: function () {
    this.getUserInfo();
    this.setSubPage(this.$route);
  }
}
</script>
<style>

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 260px;
    min-height: 400px;
  }
  .el-header{
    padding: 0 34px;
    color: #595959;
    /*background: linear-gradient(90deg,rgba(14,22,71,1) 0%,rgba(27,57,125,1) 100%);*/
    display: flex;
    background:rgba(255,255,255,1);
    box-shadow:0px 2px 8px 0px rgba(0,4,38,0.08);
  }
  .logo{
    min-width: 640px;
    vertical-align: middle;
    display: flex;
    align-items: center;
  }
  .header-right{
    flex: 1;
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
  }
  .header-right>.user-name{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    word-break: keep-all;
    right: 0;
    top: 0;
    line-height: 22px;
  }
  .header-right>.user-name>i{
    font-size: x-large;
  }
  .el-container{
    height: calc(100% - 90px);
    display: flex;
  }
  .menuDiv{
    text-align: left;
    background:rgb(0,21,41);
    overflow-y: auto;
    flex: none;
  }
  .el-menu{
    border-right:rgb(0,21,41);
  }
  .el-submenu__title [class^=el-icon-],.el-menu-item [class^=el-icon-]{
    font-size: 24px;
  }
  .el-submenu__title i,.el-menu-item i {
    /* color: #909399;*/
    color: white;
  }

  .el-submenu__title,.el-menu>.el-menu-item{
    /* padding-left: 39px!important;*/
    font-size: 20px;
  }
  /*.el-submenu .el-menu-item {
    padding-left:70px;
  }*/
  .el-menu-item:hover,.el-menu-item.is-active{
    /*border-left-color: rgb(28, 148, 229);*/
    background-color: #1890FF!important;
  }
  /*.el-menu-item{
    color: white;
    border-left: 4px solid transparent;
    border-bottom: 1px solid #CCCCCC;
  }*/

  #main {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font: 14px 'Microsoft YaHei', '微软雅黑';
  }
  .el-main{
    background-color: #F0F2F5;
  }
</style>
